<html>
  <head>
    <link rel='stylesheet' href="common.css">
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script type="notjs" id='vertex-shader'>
      attribute vec2 a_position;

      uniform vec2 u_resolution;
      
      void main() {
         // convert the rectangle points from pixels to 0.0 to 1.0

         //mat2 T = mat2(1.0, 3.0, 2.0, 1.0);
         //vec2 zeroToOne = T * a_position / u_resolution;
         vec2 zeroToOne =  a_position / u_resolution;
      
         // convert from 0->1 to 0->2
         vec2 zeroToTwo = zeroToOne * 2.0;
      
         // convert from 0->2 to -1->+1 (clipspace)
         vec2 clipSpace = zeroToTwo - 1.0;
      
         gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
      }
    </script>

    <script id='fragment-shader' type="notjs">
      precision mediump float;

      uniform vec4 u_color;

      void main() {
        gl_FragColor = u_color;
      }
    </script>


    <script src="__APP__.js"></script>
  </body>
</html>